<script setup lang="ts">
/* 
获取dom元素
1. 定义空变量
2. 模板中通过 ref 与 变量关联
3. 页面渲染完成，就会把dom存放到变量中

添加ts
通过泛型，告诉h1Ref的的类型为 null | HTMLHeadingElement
*/

import { onMounted, ref } from 'vue';


// document.querySelector('h1')
const h1Ref = ref<null | HTMLHeadingElement>(null)
onMounted(() => {
    console.log('h1Ref.value -----> ', h1Ref.value);
    if (h1Ref.value) {
        h1Ref.value.innerHTML = '喜洋洋'
    }
})
</script>

<template>
    <h1 ref="h1Ref">Hello vue3 + ts👍</h1>
</template>

<style lang="less" scoped>

</style>
